<template>
  <div  v-loading="loadingOrgan" style="height:100%;overflow: auto;" element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="RightCardTitle">基本情况</div>
    <div class="structureContentTop">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="12"><div class="grid-content bg-purple">威胁对象：<span v-show="structData.threatObjNum">{{ structData.threatObjNum }} 户</span></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple">威胁人口：<span v-show="structData.threatPNum">{{ structData.threatPNum }} 人</span></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="24"><div class="grid-content bg-purple">安置点：<span>{{ structData.resSite }}</span></div></el-col>
      </el-row>
      <el-row v-if="false" type="flex" class="row-bg" justify="space-between">
        <el-col :span="24"><div class="grid-content bg-purple">预警指标：<div><span>{{ structData.lvl1Descb }}</span></div><div><span>{{ structData.lvl2Descb }}</span></div></div></el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="24"><div class="grid-content bg-purple">防汛值班电话：<div><span>{{ structData.CountyPhone }}</span></div> <div><span>{{ structData.GoverPhone }}</span></div><div><span>{{ structData.UrgentPhone }}</span></div></div></el-col>
      </el-row>
    </div>
    <div v-if="listShowStr.length > 0 && jghyaData.Data" class="RightCardTitle">组织责任体系 </div>
    <div v-if="listShowStr.length > 0 && jghyaData.Data" class="organizationContent">
      <div class="topContent">
        <div>
          <template>
            <div v-for="(itemData,index) in jghyaData.Data[0].Data " :key="index">
              <div class="centerStyle">
                <div class="centerFont">
                  {{ itemData.OrgName }}
                </div>
              </div>
              <div class="centerLine" />
            </div>
          </template>
          <div class="bottomLine" />
          <div class="verticalFlex">
            <div class="verticalLine" />
            <div class="verticalLineRight" />
          </div>
          <div class="bottomConetnt">
            <div v-for="(itemData,index) in jghyaData.Data[1].Data" :key="index" class="bottomStyle">
              <div class="bottomFontWidth">{{ itemData.OrgName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="RightCardTitle">结构化预案</div>
    <div class="imgKsh">
      <img src="../../../assets/newimg/ksh.png" width="100%">
    </div>
  </div>
</template>
<script>
import { GetPlanBasicList, GetPlanOrganizationList } from '../../../api/xuna.js'
export default {
    data() {
        return {
            organFdplanId: '',
            structData: {},
            jghyaData: [],
            listShowStr: false,
            addvcd:'',
            loadingOrgan:false,
        }
    },
    beforeDestroy() {
        this.$eventBus.$off('organFd')
    },
    created() {
        this.$eventBus.$on('organFd', res => {
            this.organFdplanId = res.id;
            this.addvcd = res.addvcd;
            if (res.num == 2) {
                this.getGetPlanBasicList()
                this.getGetPlanOrganizationList()
            }
        })
    },
    methods: {
        getGetPlanOrganizationList() {
           let pams = {
             // 'addvcd': this.addvcd,
              'planId':this.addvcd,// this.organFdplanId
              'orgType':2,
           }
            GetPlanOrganizationList(pams).then((res) => {
               this.loadingOrgan = false;
                this.listShowStr = res.data
                this.jghyaData = res.data[0]
                console.log(this.jghyaData)
            }).catch(err=>{
                this.loadingOrgan = false;
            })
        },
        // 列表
        getGetPlanBasicList() {
            this.loadingOrgan = true;
             let pams = {
             // 'addvcd': this.addvcd,
              planId: this.addvcd,//this.organFdplanId
            }
            GetPlanBasicList(pams).then((res) => {
                this.loadingOrgan = false;
               // console.log(res)
                this.structData = res.data
            }).catch(err=>{
                 this.loadingOrgan = false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
.RightCardTitle{
  margin-top: 10px;
}
    .structureContentTop{
      height: auto;
    // margin: 0 2% 0 4%;
    //margin: 0 0px 0 4%;
    background-size: cover;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 2% 0;
    background: rgba(3,34,55,.39);
}
.grid-content{
  color: #8fc0fc;
  span{
    color: #fff;
  }
}
</style>
